<template>
  <div class="search">
    <div class="se">
      <el-button type="primary"
                 @click.native="$emit('doQuery')"
                 icon="el-icon-search"
                 :disabled="disabled">搜索</el-button>
      <el-button type="primary"
                 @click="$emit('doReset')"
                 icon="el-icon-refresh"
                 plain
                 :disabled="disabled">重置</el-button>
      <el-button v-if="isshowhigh && Object.values(this.ruleform).length > 3"
                 type="text"
                 @click="doToggle">{{ isshowbody ? '收起' : '高级搜索' }}</el-button>
    </div>
    <el-form ref="ruleForm"
             :rules="rules"
             :model="ruleform"
             label-width="130px">
      <div class="top"
           :class="{ goupdown: isshowbody ,godiv1:longScreen,godiv2:!longScreen}">
        <slot name="top"></slot>
        <slot name="center"></slot>
      </div>
      <div class="foot">
        <slot name="foot"></slot>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
    name: 'search',
    props: {
        hashigh: {
            default: true,
        },
        hasform: {
            default: true,
        },
        rules: {
            type: Object,
            default: () => {},
        },
        ruleform: {
            type: Object,
            default: () => {},
        },
        disabled: {
            default: false,
        },
    },
    data() {
        return {
            isshowbody: false,
            isshowhigh: false,
            longScreen: true,
        };
    },
    created() {
    },
    mounted() {
        if (window.innerWidth < 1500) {
            this.isshowhigh = true;
            this.longScreen = false;
        } else {
            this.isshowhigh = this.hashigh;
        }
    },
    methods: {
        doToggle() {
            this.isshowbody = !this.isshowbody;
            this.$emit('doToggle');
        },
    },
};
</script>

<style scoped lang="scss">
.search {
    background-color: #f7f8fb;
    padding-bottom: 9px;
    ::v-deep .el-input__inner {
        width: 100%;
    }
    .se {
        padding: 10px 10px;
    }
    .se:empty {
        display: none;
    }
    // 单选按钮
    ::v-deep .el-radio__inner {
        width: 22px;
        height: 22px;
    }
    ::v-deep .el-radio__inner::after {
        width: 9px;
        height: 9px;
    }
    .goupdown {
        max-height: 220px !important;
    }
    .godiv1 {
        opacity: 1;
        max-height: 50px;
        overflow: hidden;
        // transition-duration: 0.05s;
        // transition-property: all;
        // transition-timing-function: ease-in-out;
        // transition-delay: 0s;
    }
    .godiv2 {
        opacity: 1;
        max-height: 40px;
        overflow: hidden;
        // transition-duration: 0.05s;
        // transition-property: all;
        // transition-timing-function: ease-in-out;
        // transition-delay: 0s;
    }
    ::v-deep .el-form-item {
        margin: 6px 0px;
        display: inline-block;
        padding: 0;
        .el-select,
        .el-input {
            width: 100%;
        }
    }
    .top,
    .foot {
        border-top: 1px solid #ebeef5;
    }
    ::v-deep .top .el-form-item {
        width: 24%;
    }
    .foot:empty {
        border-top: none !important;
    }
    @media screen and (max-width: 1400px) {
        ::v-deep .top .el-form-item {
            width: 30%;
        }
    }
    ::v-deep .el-form-item__error {
        position: absolute;
        left: 101%;
        top: 30%;
        white-space: nowrap;
    }
}
</style>
